<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位问题</title>
		<style>
			/* 相对定位:相当于父级  没有父级相当于body
			绝对定位 :根据页面的左上角定位，失去文档流*/
			div{
				width:200px ;
				height: 200px;
				background: #f00;
				border-radius: 50%;
				posi tion: relative;/*2D相对*/
				position: absolute;/*3D绝对*/
				left: 0;
				top: 0;
			}
			.d1{
				background: #aa55ff;
			}
			.d3{
				background: #aaffff;
			
			}
			.d5{
				background: #55aa00;
			}
			.d2{
				border-radius: 0;
			}
			/* 将所有的圆改成四方块，不适应div选择器，类选择器
			 类选择器：通过别名选择元素  css语法：.别名{}
			                           html语法 class="别名1，别名2..."
			多个别名：建议不超过3个：用空格分割*/
		.d{
			border-radius:0 ;
		}
		</style>
	</head>
	<body>
		<div class="d1 d"></div>
		<div class="d2 d"></div>
		<div class="d3 d"></div>
		<div class="d4 d"></div>
		<div class="d5 d"></div>
	</body>
</html>